JS - смена картинки+увеличение

alpotemkin · January 26, 2011

Доброго времени суток!

Есть js-скрипт смены картинок по клику:

<script language='javascript'> 
function show(path) 
{ 
if (obj = document.getElementById('pic')) { 
obj.src = path; } 
} 
</script> 

<!-- Вывод большой картинки -->
<img id="pic" src = "images/01.jpg">

<!-- Превьюшки -->
<a href="#vf" onClick="show('images/01.jpg'); return false;"><IMG src="images/01.jpg"></a> 
<a href="#vf" onClick="show('images/02.jpg'); return false;"><IMG src="images/02.jpg"></a> 
<a href="#vf" onClick="show('images/03.jpg'); return false;"><IMG src="images/03.jpg"></a>

Алгоритм работы:

1. кликаешь в превьюшках по нужной картинке

2. она выводится в области большой картинки

3. кликаешь по большой картинке и она всплывает в большом размере - например LightBox.

Вопрос:

Как можно организовать 3 пункт?

Я в программировании новичок. И потому, если не сложно, покажите в виде примера или ссылки на рабочий вариант, если таковой есть.

Заранее спасибо за ответ.

psywalker · January 26, 2011

Вот ты сам уже назвал решение, LightBox - поищи в инете, их тысячи разных, или на форуме не раз спрашивали уже.

alpotemkin · January 26, 2011

Вот ты сам уже назвал решение, LightBox - поищи в инете, их тысячи разных, или на форуме не раз спрашивали уже.

Да, ты прав. Но я перекопал уже весь рунет, но не нашел нужного варианта. Есть по отдельности - смена по клику и всплывающее окно, а соединить их не получается. Второй день уже ковыряю...

psywalker · January 26, 2011

http://www.lokeshdhakar.com/projects/lightbox2/

И пока не дойдёт до 3-го пункта, ты вообще его не трогай. Просто подготавливай картинки для 3-го пункта заранее, на пункте 2

alpotemkin · January 26, 2011

http://www.lokeshdhakar.com/projects/lightbox2/
И пока не дойдёт до 3-го пункта, ты вообще его не трогай. Просто подготавливай картинки для 3-го пункта заранее, на пункте 2

Гм... может мы друг друга недопоняли? Вот пример, как мне нужно - http://www.foxsox.com/catalog/product.aspx...ectedstyle=2450

Как это реализовать с помощью LightBox - непонятно. Пощелкай по картинкам, выбери любую и кликни на большую - она увеличится.

Вот так мне и нужно.

Edited January 26, 2011 by alpotemkin

psywalker · January 26, 2011

Ну ка зацени

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Canvas</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style type="text/css">
		#win { width: 200px; height: 200px; border: 1px solid #000;}
		#menu { list-style: none;}
			#menu li { float: left; width: 50px; height: 50px; margin: 0 2px;}
	</style>


</head>

<body>

	<div id="win"></div>

	<ul id="menu">
		<li style="background: red;" class="red"></li>
		<li style="background: black;" class="black"></li>
		<li style="background: blue;" class="blue"></li>
	</ul>

	<script type="text/javascript">
		var win = document.getElementById('win');
		var menu = document.getElementById('menu');
		var color = menu.getElementsByTagName('li');

		for(var i=0;i<color.length;i++){
			color[i].onclick = function(){
				win.style.background = this.className;
			}
		}
		win.onclick = function(){
			w = window.open('http://forum.htmlbook.ru/','Моё окно','width = 300,height = 300');
		}
	</script>	
</body>
</html>

alpotemkin · January 27, 2011

Ну ка зацени

Впечятляет. Но, как мне кажется, мой код проще будет. Хотя давай по пунктам:

1. Превьюшки

Твой код:

<ul id="menu">
  <li style="background: red;" class="red"></li>
...
</ul>

Мой код:

<!-- Превьюшки -->
<a href="#vf" onClick="show('images/01.jpg'); return false;"><IMG src="images/01.jpg"></a> 
...

Т.е. в <IMG src="images/01.jpg"> задается картинка цвета, а в <a href="#vf" onClick="show('images/03.jpg'); return false;"> сама модель этого цвета. Попробовал отредактировать твой код, но что-то делаю не так.

2. Большая картинка

Твой код:

<script type="text/javascript">
  var win = document.getElementById('win');
  var menu = document.getElementById('menu');
  var color = menu.getElementsByTagName('li');

  for(var i=0;i<color.length;i++){
  color[i].onclick = function(){
  win.style.background = this.className;
  }
   }
  win.onclick = function(){
  w = window.open('http://forum.htmlbook.ru/','Моё окно','width = 300,height = 300');
  }
</script>

Мой код:

<!-- Вывод большой картинки -->
<img id="pic" src = "images/01.jpg">

В src = "images/01.jpg" показывается картинка модели. При выборе в превьюшках другого цвета тут выводится картинка модели выбранного цвета. Как http://www.foxsox.com/catalog/product.aspx...ectedstyle=2450. При этом нажимаешь на большую картинку и она открывается в полном размере.

Опять же пробовал отредактировать - не получилось.

А я всего лишь хотел повесить на <img id="pic" src = "images/01.jpg"> возможность открытия полноразмерной картинки выбранной модели.

Может надо вместо "images/01.jpg" вставить какую-то переменную?

Edited January 27, 2011 by alpotemkin

psywalker · January 27, 2011

Смотри, способы реализации разные, если у тебя короче получилось, это даже хорошо, главное чтобы работало правильно. Насчёт пункта 3 есть идея. Ты спрячь изначально какой нибудь блок на странице, на абсолюте, пустой, координаты ему задай нужные и размеры, далее при нажатии уже на картинку(пункт 3) выводи в этом блоке её, уже нужного размера.

alpotemkin · January 27, 2011

Смотри, способы реализации разные, если у тебя короче получилось, это даже хорошо, главное чтобы работало правильно. Насчёт пункта 3 есть идея. Ты спрячь изначально какой нибудь блок на странице, на абсолюте, пустой, координаты ему задай нужные и размеры, далее при нажатии уже на картинку(пункт 3) выводи в этом блоке её, уже нужного размера.

Работать-то работает. Только всплывающее окно большой картинки не прикрутить. Что касается блока - ну нет, мне ж не на странице выводить, а чтоб всплывало. :-)

Я вот подумал, а может можно как-то объединить наши скрипты? Что-то типа такого:

<script language='javascript'> 
function show(path) 
{ 
if (obj = document.getElementById('pic')) { 
obj.src = path; } 
} 
</script>

<!-- Вывод большой картинки -->
<script type="text/javascript">
...
win.onclick = function(){
w = window.open('переменная выбранной картинки','Моё окно','width = 300,height = 300');
}
</script>

<!-- Превьюшки -->
<a href="#vf" onClick="show('images/01.jpg'); return false;"><IMG src="images/01.jpg"></a> 
<a href="#vf" onClick="show('images/02.jpg'); return false;"><IMG src="images/02.jpg"></a> 
<a href="#vf" onClick="show('images/03.jpg'); return false;"><IMG src="images/03.jpg"></a>

Только в  что-то как-то прикрутить. Я в JS ообще ноль, читаю вот доки, но пока не врубаюсь... Есть какие-то идеи?

psywalker · January 27, 2011

Да идея такова, что тогда тебе нужно проделать два первых пункта, а потом на картинку в блоке установить онклик, по нажатию на который уже будет открываться всплывающее окно с картинкой.

alpotemkin · January 27, 2011

Да идея такова, что тогда тебе нужно проделать два первых пункта, а потом на картинку в блоке установить онклик, по нажатию на который уже будет открываться всплывающее окно с картинкой.

Хм, спрашивая про идею, я имел в виду наглядный пример. Извиняюсь за наглость, но, как говорил, в JS пока новичок...

psywalker · January 27, 2011

Хм, спрашивая про идею, я имел в виду наглядный пример. Извиняюсь за наглость, но, как говорил, в JS пока новичок...

Я тебе его привёл выше.

alpotemkin · January 27, 2011

Я тебе его привёл выше.

Не получилось сделать рабочий вариант. Придется отказаться от этой идеи.

psywalker · January 27, 2011

Не получилось сделать рабочий вариант. Придется отказаться от этой идеи.

Да зачем? Что у тебя не получается, ты же сделал сам два пункта, а третий используй мой с отрывающим окошком, что не так?

alpotemkin · January 27, 2011

Да зачем? Что у тебя не получается, ты же сделал сам два пункта, а третий используй мой с отрывающим окошком, что не так?

Да просто не получилось прикрутить твое окошко к моим пунктам. То ли тупой такой, то ли руки кривые... В общем у меня такой вариант:

1. Главная страница

<html>
<head>
<title>Test</title>
<script type="text/javascript" language="JavaScript" src="./pics.js"></script>
<script language='javascript'> 
function show(path) 
{ 
if (obj = document.getElementById('pic')) { 
obj.src = path; } 
} 
</script>
</head>
<body onLoad="handset()">
<center>
<!-- Вывод большой картинки -->
<img id="pic" src = "01S.jpg" onClick="openw(this)">
<!-- Превьюшки -->
<a href="#vf" onClick="show('01S.jpg'); return false;"><IMG src="001.jpg"></a> 
<a href="#vf" onClick="show('02S.jpg'); return false;"><IMG src="002.jpg"></a> 
</center>
</body>
</html>

Где: 001.jpg - картинка цвета, 01S.jpg - превьюшка, 01.jpg - большая картинка

2. Окно с большой картинкой

<html>
<head>
<script type="text/javascript" language="JavaScript" src="./pics.js"></script>
</head>
<body onload="showp()">
<center>
<img border=1 OnLoad="resizep()" scr="">
<div OnClick="window.close()" style="cursor: hand"><img src="./close.gif" border="0" /></div>
</center>
</body>
</html>

3. Скрипт

// Изменение размеров окна под картинку
function resizep() {
var w, h;
w = document.images[0].width;
h = document.images[0].height;
window.resizeTo(w+50, h+110);}

// Функция показа картинки
function showp() {
document.images[0].src = location.search.substring(1);}

// Функция открытия нового окна и передачи адреса картинки
function openw(res) {
var z = res.src;
z = z.substring(0, z.length-5)+z.substring(z.length - 4);
window.open("picview.htm?"+z, null, "top=20, left=40, channelmode=no, toolbar=no, location=no, directories=no, menubar=no, scrollbars=1");}

// Изображения со событием onClick делаем с курсором рука
function handset() {
n = document.images.length;
for (i=0; i<n; i++)
  {if (document.images[i].onClick != '')
	  {document.images[i].style.cursor = 'hand';}}
}

Все работает, и вроде неплохо. А насчет твоего окошка - если не трудно, выложи пожалуйста рабочий вариант моего с твоим окошком. Если, конечно, не сложно. Вдруг будет лучше. Да и я пойму, где недопонял.

barsev · January 28, 2011

Все работает, и вроде неплохо. smile.gif А насчет твоего окошка - если не трудно, выложи пожалуйста рабочий вариант моего с твоим окошком. Если, конечно, не сложно. Вдруг будет лучше. Да и я пойму, где недопонял. rolleyes.gif

Да простит меня psywalker, но зачесались руки залезть в его прелестный код, и вот что получилось:

в стилях добавляем

#win img { cursor:pointer;}

ul делаем так

<ul id="menu">
		<li style="background: red;" class="01"></li>
		<li style="background: black;" class="02"></li>
		<li style="background: blue;" class="03"></li>
</ul>

и немножко изменяем скрипт

for(var i=0;i<color.length;i++){
  color[i].onclick = function(){
	  win.innerHTML = "<img src='"+this.className+"S.jpg' class='"+this.className+"' />";
  }
}
win.onclick = function(){
	w = window.open(this.childNodes[0].className+".jpg",'Моё окно','width = 300,height = 300');
}

Все работает прекрасно.

psywalker · January 28, 2011

Да простит меня psywalker,

Не прощу только за одну вещь, названия классов нельзя начинать с цифр.

<li style="background: red;" class="01"></li>

А в целом, если работает, то отлично

alpotemkin · February 2, 2011

Хммм... хороший вариант, и кода меньше. <_<

Sign In

JS - смена картинки+увеличение

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information